<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-22 17:39:44
-->
<template>
  <div ref='root' style="height:150px">
    
  </div>
</template>
<script>
import { Bullet } from '@antv/g2plot';
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initCharts();
  },
  methods:{
    initCharts(){
      let bullet = new Bullet(this.$refs['root'],{
        data:[
          {
            title: '政务大厅',
            ranges: [30, 90, 120],
            measures: [65],
            target: 80,
          },
          {
            title: '一鹿快办',
            ranges: [30, 90, 120],
            measures: [50],
            target: 100,
          },
          {
            title: '政务服务网',
            ranges: [30, 90, 120],
            measures: [40],
            target: 85,
          },
          {
            title: '一体机',
            ranges: [30, 90, 120],
            measures: [50],
            target: 100,
          },
        ],
        measureField: 'measures',
        rangeField: 'ranges',
        targetField: 'target',
        xField: 'title',
        color: {
          range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
          measure: '#5B8FF9',
          target: '#39a3f4',
        },
        label: {
          measure: {
            position: 'middle',
            style: {
              fill: '#fff',
            },
          },
        },
        xAxis: {
          line: null,
        },
        yAxis: false,
        // 自定义 legend
        legend: {
          custom: true,
          position: 'bottom',
          items: [
            {
              value: '差',
              name: '差',
              marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } },
            },
            {
              value: '良',
              name: '良',
              marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } },
            },
            {
              value: '优',
              name: '优',
              marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
            },
            {
              value: '实际值',
              name: '实际值',
              marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
            },
            {
              value: '目标值',
              name: '目标值',
              marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
            },
          ],
        },
      });
      // 4.
      bullet.render();
    }
  }
}
</script>